<template>
  <view class="part p-3 box-border mt-2.5 part-box" @click="scanDeatil">
    <view class="mb-2.5 flex flex-row items-center justify-between w-[100%]">
      <view class="flex flex-row items-center">
        <image class="icon" :src="moduleIcon" mode="aspectFit"></image>
        <text class="text-[32rpx] color-black font-bold ml-1">{{
          moduleTitle
        }}</text>
      </view>
      <view class="flex flex-row items-center">
        <view>
          <up-text
            v-if="showMore"
            suffixIcon="arrow-right"
            :iconStyle="{ color: '#000', fontSize: '20rpx' }"
            text="更多"
            color="#000000"
            size="25rpx"
            @click.stop="onMore"
          ></up-text>
        </view>
        <text class="text-black text-26rpx mr-2" v-if="showTotal"
          >总计：{{ totalNum }}</text
        >
        <template v-if="showQuery">
          <view
            :class="
              modeType == 0
                ? 'opt-btn opt-btn-active'
                : 'opt-btn opt-btn-unactive'
            "
            style="padding: 5rpx 16rpx"
            @click.stop="onMode(0)"
            >本月</view
          >
          <view
            :class="
              modeType == 1
                ? 'opt-btn opt-btn-active ml-2'
                : 'opt-btn opt-btn-unactive ml-2'
            "
            style="padding: 5rpx 16rpx"
            @click.stop="onMode(1)"
            >本年</view
          >
        </template>
      </view>
    </view>
    <view class="menu-content">
      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps({
  moduleIcon: {
    type: String,
    default: "",
  },
  moduleTitle: {
    type: String,
    default: "",
  },
  showMore: {
    type: Boolean,
    default: false,
  },
  modeType: {
    type: Number,
    default: 0,
  },
  showQuery: {
    type: Boolean,
    default: false,
  },
  showTotal: {
    type: Boolean,
    default: false,
  },
  totalNum: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["onMoreBtn", "scanModuleDeatil", "changeMode"]);

const onMore = () => {
  emit("onMoreBtn");
};
const scanDeatil = () => {
  emit("scanModuleDeatil");
};
const onMode = (mode: number) => {
  emit("changeMode", mode);
};
</script>
<style lang="scss" scoped>
.part {
  .icon {
    width: 36rpx;
    height: 36rpx;
  }
  .menu-content {
    width: 100%;
  }
}
</style>
